<template>
	<view class="search">
		<view class="tab-main">
			<uni-search-bar :radius="20" :maxlength="30" v-model="searchValue" placeholder="请输入关键字搜索"
				cancelButton="none" @confirm="handleSearch"></uni-search-bar>
		</view>
		<template v-if="list && list.length">
			<view class="sub">
				<span class="sub-name">搜索历史</span>
				<span class="icon" @click="handleClear">
					<uni-icons color="#999" type="trash" size="24"></uni-icons>
				</span>
			</view>
			<view class="list">
				<view v-for="(name, i) in list" :key="i" class="item" @click="handleItem(name)">
					<span class="item-cnt" >{{ name }}</span>
					<span class="icon" @click.stop="handleRemove(i)">
						<uni-icons color="#666" type="closeempty"></uni-icons>
					</span>
				</view>
			</view>
		</template>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				searchValue: '',
				list: []
			}
		},
		mounted() {
			try {
				const storageList = uni.getStorageSync('report-list')
				const historyList = Array.isArray(storageList) ? storageList : [];
				this.list = historyList.splice(0, 10)
			} catch {
				this.list = []
			}
		},
		methods: {
			handleSearch() {
				if(this.searchValue) {
					this.list.push(this.searchValue)
					uni.setStorageSync('report-list', this.list)
					uni.$emit('ReportSearch', this.searchValue.trim())
					uni.navigateBack()
				} else {
					this.$util.Tips("请输入关键字");
				}
			},
			handleItem(value) {
				uni.$emit('ReportSearch', value)
				uni.navigateBack()
			},
			handleClear() {
				uni.removeStorageSync('report-list')
				this.list = []
			},
			handleRemove(i) {
				this.list.splice(i, 1)
				uni.setStorageSync('report-list', this.list)
			}
		}
	}
</script>


<style lang="scss" scoped>
	.icon {
		padding: 10rpx 10rpx 10rpx 30rpx;
		margin-right: -10rpx;
	}

	.search {
		min-height: 100vh;
		background-color: #fff;
		padding: 0 30rpx;

		.sub {
			display: flex;
			font-size: 24rpx;
			color: #000;
			align-items: center;
			justify-content: space-between;
			position: relative;
			padding: 10rpx 0;
			.sub-name {
				color: #999;
				font-size: 26rpx;
			}
			&::after {
				position: absolute;
				content: '';
				left: -30rpx;
				right: -30rpx;
				bottom: 0;
				background-color: #eee;
				height: 1rpx;
			}

		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 75rpx;
			border-bottom: 1rpx solid #efefef;
			&-cnt {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 30rpx;
				color: #666;
				line-height: 45rpx;
			}

			&-icon {
				white-space: nowrap;
				padding: 10rpx;
			}
		}
	}

	/deep/ .uni-searchbar {
		padding: 10rpx 0rpx;

		&__box {
			border: 2rpx solid #488AFD;
			padding: 20rpx 15rpx 20rpx 0 !important;
			height: auto !important;


			.uni-searchbar__box-icon-clear {
				line-height: 20rpx !important;
			}

			.uni-icons {

				&.uniui-search,
				&.uniui-clear {
					font-size: 32rpx !important;
				}
			}

			&-search-input,
			.uni-searchbar__text-placeholder {
				font-size: 28rpx !important;
				line-height: 40rpx !important;
				margin-top: 0 !important;
				margin-left: 0 !important;
				height: 40rpx !important;
				min-height: 40rpx !important;
			}
		}
	}
</style>